<script setup lang="ts">
import type { Ref } from 'vue';

import { onMounted, ref } from 'vue';

import { useAppConfig } from '@vben/hooks';
import { ElClose } from '@vben/icons';

import {
  ElDivider,
  ElEmpty,
  ElIcon,
  ElMessageBox,
  ElOption,
  ElRow,
  ElSelect,
  ElTabPane,
  ElTabs,
} from 'element-plus';

import { useClickOutside } from '#/hooks';
import { useSceneStore } from '#/store';

const emit = defineEmits(['selectSprite', 'closePannel', 'changeSpriteLib']);

const { mapboxAssetsIP } = useAppConfig(import.meta.env, import.meta.env.PROD);
const sceneStore = useSceneStore();
const spritePannelRef: Ref<HTMLElement | null> = ref(null);
const spriteJsonSelect = ref<Record<string, any>>({});
const spritePngSelect = ref<string>('');
const spriteNameSelect = ref<'mapstudio' | 'osm_liberty'>('mapstudio');
const spriteClassList = ref<Array<string>>(['mapstudio', 'osm_liberty']);

const getSprite = async () => {
  const baseUrl = `${mapboxAssetsIP}/sprites/${spriteNameSelect.value}`;
  const url = `${baseUrl}/sprite.json`;

  try {
    const res = await fetch(url);
    const json = await res.json();
    spriteJsonSelect.value = json;
    // console.log('精灵图json', spriteJsonSelect.value);
    spritePngSelect.value = `${baseUrl}/sprite.png`;
  } catch (error) {
    console.error('发生错误:', error);
  }
};
const getSpriteStyle = (item: any) => {
  return {
    padding: 0,
    width: `${item.width + 30}px`,
    height: `${item.height + 30}px`,
    cursor: 'pointer',
  };
};
const getSpritePngStyle = (item: any) => {
  return {
    'background-image': `url(${spritePngSelect.value})`,
    width: `${item.width}px`,
    height: `${item.height}px`,
    'background-position': `-${item.x}px -${item.y}px`,
  };
};
const handleSelectSprite = (item: any, key: string) => {
  // console.log(item, key);
  emit('selectSprite', item, key);
};

const handleClosePannel = () => {
  emit('closePannel');
};
useClickOutside(spritePannelRef, handleClosePannel);

const handleChangeSpriteLib = () => {
  ElMessageBox.confirm(
    '更换图标库将会导致当前地图图标不可用，是否继续?',
    '提示',
    {
      confirmButtonText: '继续',
      cancelButtonText: '取消',
      type: 'warning',
    },
  )
    .then(() => {
      getSprite();
      sceneStore.currentSceneConfig.sprite = spriteNameSelect.value;
    })
    .catch(() => {
      spriteNameSelect.value =
        sceneStore.currentSceneConfig.sprite ?? 'mapstudio';
    });
};
onMounted(() => {
  spriteNameSelect.value = sceneStore.currentSceneConfig.sprite ?? 'mapstudio';
  getSprite();
});
</script>

<template>
  <div ref="spritePannelRef">
    <div class="close-btn-box" @click="handleClosePannel" title="关闭">
      <ElIcon class="close-btn">
        <ElClose />
      </ElIcon>
    </div>
    <ElTabs>
      <ElTabPane label="精灵图" style="height: 400px; overflow-y: scroll">
        <ElRow type="flex" align="middle">
          <div class="pannel-header">
            <span>图标库:&nbsp;</span>
            <ElSelect
              v-model="spriteNameSelect"
              placeholder="请选择精灵图"
              @change="handleChangeSpriteLib"
              style="width: 65%"
              size="default"
            >
              <ElOption
                v-for="item in spriteClassList"
                :key="item"
                :label="item"
                :value="item"
              />
            </ElSelect>
          </div>
          <ElDivider border-style="hidden" style="margin: 2px 0" />
          <div style="display: flex; flex-wrap: wrap; width: 400px">
            <div
              v-for="(item, key) in spriteJsonSelect"
              :key="key"
              :title="key.toString()"
              @click="handleSelectSprite(item, key)"
              class="spriteCard"
              body-style="padding:0"
              :style="getSpriteStyle(item)"
            >
              <div :style="getSpritePngStyle(item)"></div>
            </div>
          </div>
        </ElRow>
      </ElTabPane>
      <ElTabPane label="自定义" style="height: 400px">
        <ElEmpty
          description="暂无自定义符号"
          :image-size="100"
          style="height: 100%"
        />
        <!-- <el-row type="flex" justify="start" style="flex-wrap: wrap; width: 100%">
            <el-card class="spriteImage" v-for="(item, index) in symbolTableData" :key="index">
              <el-image style="width: 100px; height: 100px" :src="reqUrl + item.webAddress" fit="cover" class="cursor"
                @click="iconSelect(item)">
              </el-image>
            </el-card>
          </el-row> -->
      </ElTabPane>
    </ElTabs>
  </div>
</template>

<style lang="scss" scoped>
/* 修改浏览器默认滚动条样式 */

:deep(::-webkit-scrollbar) {
  width: 7px;
}

:deep(::-webkit-scrollbar-thumb) {
  background-color: #c0c4cc;
  border-radius: 5px;
}

:deep(::-webkit-scrollbar-thumb:hover) {
  cursor: pointer;
  background-color: #a5a9b5;
}

:deep(::-webkit-scrollbar-track) {
  background-color: #f4f4f4;
}

/* 精灵图单元格 */
.spriteCard {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 400px;
}

.spriteCard:hover {
  background-color: #57575a;
  border-radius: 4px;
  box-shadow: 0 0 10px 1px rgb(0 0 0 / 30%);
}

.pannel-header {
  display: flex;
  align-items: center;
  width: 100%;
  height: 35px;

  /* margin-bottom: 10px; */
  // padding: 4px 0 5px 10px;
  span {
    font-size: 14px;
    font-weight: 600;
  }
}

:deep(.el-tabs__header) {
  margin: 0 0 10px;
}

.close-btn-box {
  position: absolute;
  top: 5px;
  right: 5px;
  z-index: 999;
  box-sizing: border-box;
  width: 30px;
  height: 30px;
  margin-left: 10px;
}

.close-btn-box:hover {
  font-weight: 700;
  color: rgb(63 158 255);
  cursor: pointer;
  border: 1px solid rgb(63 158 255);
  transform: scale(1.2);
}

.close-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
</style>
